/* GALERIA */

#galery {
    align-items: center;
}

/* BOTONES FILTROS */
.panel{
    display: none;
}

.botonesfiltro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;     
    padding: 1rem 0;
    gap: 0.5rem;
}

.botonesfiltro button {
    margin: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;

    cursor: pointer;
    font-weight: 600;
    font-size: 1.25rem;

    flex: 0 1 auto;
    min-width: 100px;

    border-radius:  7px;
    color: var(--color-texto);
    background-color: var(--color-botones);
    transition: all 0.2s ease; 
    box-shadow: 0 5px 0px rgba(0,0,0,0.5); 
}

.botonesfiltro button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0px rgba(125, 125, 125, 0.5);
}

.botonesfiltro button:active {
    transform: translateY(3px);
    color:var(--color-principal);
    box-shadow: 0 2px 0px var(--color-principal);
}

.botonesfiltro button.activo {
    color: var(--color-principal);
    background-color: white;
    box-shadow: 0 4px 0px var(--color-principal);
}

/*Para movil*/
@media (max-width: 48rem) {
    .botonesfiltro {
        flex-direction: column;
        width: 100%;
        padding: 0.5rem;
    }
    .botonesfiltro button {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
        margin: 0.25rem 0;
    }
}

/* GALERIA */

.rejilla {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    gap: 0.125rem;
}

@media (max-width: 1200px) {
    .rejilla {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .rejilla {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .rejilla {
        grid-template-columns: 1fr;
    }
    .contenido:hover {
        transform: scale(1.02);
    }
}

/*Contenido Galeria*/
.contenido {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.contenido:hover{
    transform: scale(1.1);
    z-index: 10;
    box-shadow:
        0 0 12px var(--color-principal),
        0 0.625rem 30px rgba(0, 0, 0, 0.8);
        z-index: 1000;
        color: var(--color-principal);
}

@media (hover: hover) {
    .contenido:hover{
        transform: scale(1.05);
        z-index: 2;
        box-shadow: 0 0 12px var(--color-principal), 0 0.625rem 30px rgba(0, 0, 0, 0.8);
    }
    .contenido:hover .overlay-resumen h2,
    .contenido:hover .overlay-resumen p {
        color: var(--color-principal);
    }
    
    .contenido:hover .overlay-resumen {
        color: var(--color-principal);
    }
}


.overlay-resumen {
    color: var(--color-texto);
    background-color:  #00000045;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.625rem;
    box-sizing: border-box;
}

.contenido:hover .overlay-resumen h2,
.contenido:hover .overlay-resumen p {
    color: var(--color-principal);
}

.overlay-resumen h2 
.overlay-resumen p{
    margin: 0.313rem 0 0;
}


/*MINIATURA*/
.miniatura-galeria  {
    flex: 0 0 auto;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* OVERLAY ZOOM */
.overlay-zoom {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 2000;

    padding: 1rem;
    box-sizing: border-box;

    backdrop-filter: blur(8px);
    }

/* CONTENEDOR FIJO */
.overlay-zoom .contenido-ampliado {
    width: 80vw; 
    height: 80vh;
    max-width: 75rem; 
    max-height: 50rem;
    padding: 1rem;

    background: white;
    border-radius: 1rem;
    border: 2px solid var(--color-principal);
    box-shadow:
        0 0 50px var(--color-principal),
        0 10px 30px rgba(0, 0, 0, 0.8);

    display: flex;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}



/* IMÁGENES Y VÍDEOS */
.overlay-zoom .contenido-ampliado img,
.overlay-zoom .contenido-ampliado video {
    max-width: 100%;
    max-height: 100%;

    display: block;
}

.overlay-zoom .contenido-ampliado iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.overlay-zoom .close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 4rem;
    color: var(--color-principal);
    cursor: pointer;
    z-index: 2100;
}

@media (max-width: 48rem) {
    .overlay-zoom .close {
        font-size: 2.5rem;
    }
}

/* CARRUSEL */
.carrusel {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    position: relative;
}


/* Imagen grande */
.carrusel-marco {
    width: 100%;
    height: 100%;
    max-height: 80vh;

    overflow: hidden;
    border-radius: 1rem;
}


.carrusel-principal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

video.carrusel-principal {
    background: black;
}

/* Miniaturas */
.carrusel-miniaturas {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    justify-content: center;
    margin-top: 1rem;
    padding: 1rem 0; 
    width: 100%; 
    max-width: 100%; 
    scroll-behavior: smooth; 
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch; 
}

.carrusel-miniaturas::-webkit-scrollbar {
    height: 0.625rem; 
    background-color: rgba(0,0,0,0.05); 
    border-radius: 5px;
}

.carrusel-miniaturas::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3); 
    border-radius: 0.313rem;
    transition: background-color 0.2s ease;
}

.carrusel-miniaturas::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.5); 
}

.carrusel-miniaturas::-webkit-scrollbar-track {
    background-color: transparent; 
}

.carrusel-miniaturas {
    scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05); 
    scrollbar-width: thin; 
}

.carrusel-thumb {
    flex: 0 0 auto;
    width: 6.25rem;
    height: 6.25rem;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
    scroll-snap-align: start;
}

.carrusel-thumb:hover {
    transform: scale(1.1);
    opacity: 1;
}

.carrusel-thumb.activa {
    opacity: 1;
    outline: 3px solid var(--color-principal);
    scroll-snap-align: start; 
}


@media (max-width: 48rem) {
    .overlay-zoom {
    padding: 0;
    margin: 0; /* Cambiado de 1rem a 0 */
    border-radius: 1rem;
}

.overlay-zoom .contenido-ampliado {
    width: 90vw;
    height: 90dvh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
    padding: 0.5rem;
}

.overlay-zoom .close {
    font-size: 2.5rem;
    top: 0.625rem; /* Ajusta la posición */
    right: 0.625rem;
    padding: 0.5rem;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
}

@media (max-height: 48rem) and (orientation: landscape) {

    .carrusel {
        flex-direction: row;
        align-items: stretch;
        gap: 0.75rem;
    }

    .carrusel-marco {
        flex: 1;
        max-height: 100%;
        aspect-ratio: auto;
    }

    .carrusel-miniaturas {
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        width: 5rem;
        height: 100%;
        max-height: 80vh;
        gap: 0.5rem;
    }

    .carrusel-miniaturas {
        scrollbar-width: thin;
    }

    .carrusel-thumb {
        width: 4rem;
        height: 4rem;
    }

}